import React, { useState } from 'react'
import './index.css'
import todosStore from '../../../store/todosStore'

export default function Header() {

  const [title, setTitle] = useState('')

  // 点击enter键处理
  const handleEnter = (e) => {
    // 点击的是enter键
    if (e.keyCode===13) {
      // 如果没有输入, 提示必须输入
      if (title.trim()==='') {
        setTitle('')
        alert('必须输入')
        return
      }
      // 调用函数添加todo
      todosStore.addTodo(title)
      // 清除输入
      setTitle('')
    }
  }

  return (
    <div className="todo-header">
      <input type="text" placeholder="请输入你的任务名称，按回车键确认" 
        onKeyUp={handleEnter} value={title} onChange={e => setTitle(e.target.value)}/>
    </div>
  )
}
